<template>
  <div class="tableWrapper">
    <el-input
    placeholder="标签之间请用空格隔开"
    icon="search"
    class="searchInput"
    v-model="searchLabel"
    :on-icon-click="handleIconClick"
    ></el-input>
    <el-table
      :data="tableData"
      border
      v-loading="loading"
      element-loading-text="阿理玩命加载中"
      style="width: 100%">
      <el-table-column
        prop="updateTime"
        label="日期"
        width="150">
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        width="300">
      </el-table-column>
      <el-table-column
        prop="tagName"
        label="标签"
        width="200">
        <template scope="scope">
          <el-tag
            type="primary"
            close-transition
            v-for="item in scope.row.tags"
            key="item.id">
            {{item.tagName}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        width="150px"
        :filters="[{ text: '审核通过', value: '审核通过'}, {text: '未审核', value: '未审核'}, {text: '审核未通过', value: '审核未通过'}]"
        :filter-method="filterState"
      >
        <template scope="scope">
          <el-tag
            :type="scope.row.state === '审核未通过' ? 'danger' : 'primary'"
            close-transition
          >
            {{scope.row.state}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template scope="scope">
          <el-button
            @click.native.prevent="EditRow(scope.$index, scope.row)"
            type="text"
            size="small">
            编辑
          </el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.$index, scope.row)"
            type="text"
            size="small">
            删除
          </el-button>
          <el-button
            @click.native.prevent="reviewRow(scope.$index, scope.row)"
            type="text"
            v-if="scope.row.state === '未审核' && root === '1'"
            size="small">
            审核
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pageBlock">
      <el-pagination
        layout="prev, pager, next"
        @current-change="fetchData"
        :total="articalCount">
      </el-pagination>
    </div>
    <artical-view
      v-if="viewShow"
      :artical="this.detailArtical[this.detailArtical.length - 1]"
      @close="viewClose">
    </artical-view>
    <artical-dialog 
    :visible="isVisible"
    @close="close"
    :textData="editDetail"></artical-dialog>
  </div>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'
  import ArticalView from './ArticalView'
  import ArticalDialog from './Dialog'
  export default {
    name: 'ArticalManager',
    data () {
      return {
        viewShow: false,
        tableData: [],
        loading: true,
        isVisible: false,
        articalDetail: {},
        root: '2',
        searchLabel: ''
      }
    },
    computed: {
      ...mapGetters([
        'allTableDatas',
        'allResult',
        'allNotice',
        'detailArtical',
        'articalCount',
        'tags',
        'editDetail'
      ])
    },
    beforeCreate () {
      this.loading = true
    },
    created () {
      this.$store.dispatch('getTableDatas', {page: 1})
      this.root = window.localStorage.root
    },
    watch: {
      allTableDatas () {
        this.tableData = this.$store.state.artical.tableData
        this.loading = false
      },
      allResult (val) {
        this.$message.error(val[val.length - 1]['msg'])
        this.loading = false
      },
      allNotice (val) {
        this.$message({
          type: 'success',
          message: val[val.length - 1].msg
        })
      },
      detailArtical (val) {
        this.detailArtical = val
      }
    },
    components: {
      ArticalView,
      ArticalDialog
    },
    methods: {
      ...mapActions([
        'getTableDatas',
        'deleteData',
        'review',
        'getNewsDetail',
        'getSearchData'
      ]),
      handleIconClick () {
        let params = this.searchLabel.split(' ')
        this.$store.dispatch('getSearchData', {tagName: params})
      },
      close () {
        this.isVisible = false
      },
      formatter (row, column) {
        return row.address
      },
      filterTag (value, row) {
        if (row.tags) {
          for (let i = 0; i < row.tags.length; i++) {
            return row.tags[i].tagName === value
          }
        }
      },
      filterState (value, row) {
        return row.state === value
      },
      fetchData (currentPage) {
        if (this.searchLabel === '') {
          this.$store.dispatch('getTableDatas', {page: currentPage})
        } else {
          this.$store.dispatch('getSearchData', {page: currentPage, tagName: this.searchLabel})
        }
      },
      deleteRow (index, row) {
        this.$confirm('将删除该文章，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'wraning'
        })
        .then(() => {
          this.$store.dispatch('deleteData', {newsId: row.id})
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      reviewRow (index, row) {
        this.$store.dispatch('review', {newsId: row.id})
          .then(() => {
            this.viewShow = true
          })
      },
      EditRow (index, row) {
        this.$store.dispatch('getNewsDetail', {newsId: row.id})
        .then(() => {
          this.isVisible = true
        })
      },
      viewClose () {
        this.viewShow = false
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .tableWrapper
    width: 1000px
    margin: 100px auto
    .searchInput
      width: 200px
      margin-bottom: 20px
    .pageBlock
      float: right
</style>
